<template>
  <div ref="lines" :style="{ height: '400px', width: '100%' }"></div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    const my = this.$echarts.init(this.$refs.lines)
    let option = {
      xAxis: {},
      yAxis: {},
      legend: {},
      series: [{
        symbolSize: 20,
        data: [
          [1.0, 8.04],
          [9.0, 8.81],
          [14.0, 5.96],
          [7.0, 4.82],
          [4.0, 3.68],
        ],
        type: 'scatter'
      },

      {
        name: 'rode',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        polyline: true,
        effect: { // 线特效的配置
          show: true,
          symbol: 'arrow',
          symbolSize: [10, 20],
          period: 6,  // 特效动画的时间，单位为 s
          trailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
        },
        data: [
          {
            coords: [
              [1.0, 8.04],
              [9.0, 8.81],
              [14.0, 5.96],
            ]
          }
        ],
        lineStyle: {
          normal: {
            color: '#389BB7',
            width: 1,
            opacity: 0.4,  // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
            curveness: 0.5 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
          }
        }
      },
      {
        name: 'node',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        polyline: true,
        effect: { // 线特效的配置
          show: true,
          symbol: 'arrow',
        
          period: 10,  // 特效动画的时间，单位为 s
          trailLength: 0.5, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
        },
        data: [
          {
            coords: [
              [14.0, 5.96],
              [7.0, 4.82],
              [4.0, 3.68],
            ]
          }
        ],
        lineStyle: {
          normal: {
            color: 'red',
            width: 1,

            opacity: 0.4,  // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
            curveness: 0.8 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
          }
        }
      }]
    }

    my.setOption(option)
  }

}
</script>

<style>
</style>